<template>
  <div class="footer">
    <div class="up">
      <div class="left"><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/gone/copyRight.png"></div>
      <div class="right">客户端下载</div>
    </div>
    <div class="middle">
      <div class="left">
        <div>联系电话：</div>
        <div>400-0835-999</div>
        <div>地址：北京市朝阳区姚家园南路1号惠通时代广场7号楼G区 能链中心</div>
      </div>
      <div  class="right">
        <div><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/tuan.png" alt=""><span>团油</span></div>
        <div><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/company.png" alt=""><span>团油专业版</span></div>
        <div><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/flee.png" alt=""><span>快电</span></div>
        <div><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/guan.png" alt=""><span>团油官微</span></div>
      </div>
    </div>
    <div class="bottom">
      <div><span>加油站合作:</span><span>sunweilin@newlink.com</span></div>
      <div><span>媒体联系:</span><span>yuchu@newlink.com</span></div>
      <div><span>商务合作:</span><span>wangyang@newlink.com</span></div>
      <div><span>充电桩合作:</span><span>yuxiang@gokuaidian.com</span></div>
      <div><span>广告合作:</span><span>wangyang@newlink.com </span></div>
      <div><span>客服中心:</span><span>400-0835-999</span></div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.footer{
  width: 100%;
  padding: 35px 30px;
  background: #333333;
  .up, .middle{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .up{
    height: 50px;
    .left{
      >img {
        display: inline-block;
        width: 270px;
        height: 30px;
      }
    }
    .right{
      padding-right: 300px;
      text-align: left;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
  .middle{
    height: 100px;
    .left{
      width: 50%;
      >div{
        margin-top:10px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }
      >div:nth-child(2){
        font-size: 30px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #008BFF;
      }
    }
    .right{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      >div{
        width: 100px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        >img{
          display: block;
          width: 70px;
          height: 70px;
        }
      }
    }
  }
  .bottom{
    height: 80px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    >div{
      width: 33.3%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      >span:nth-child(1){
        display: inline-block;
        width: 90px;
      }
      >span:nth-child(2){
        display: inline-block;
        width: 200px;
      }
    }
    >div:nth-child(1), >div:nth-child(4){
      justify-content: flex-start;
    }
    >div:nth-child(3), >div:nth-child(6){
      justify-content: flex-end;
    }
  }
}
</style>